<!-- vip页面 -->
<template>
  <view class="vip_page screen-width">
    <view class="vip_top">
      <view class="vip_top_bgimg">
        <!-- <image mode="widthFix" :src="$imgUrl + 'static/yd-huodong-bg.jpg'" /> -->
        <image mode="widthFix" src="https://m.51bmj.cn/mobile/vip_head_img.jpg" />
      </view>
      <view class="vip_top_content">
        <scroll-view scroll-x class="vip_main_content">
          <view
            @tap="switchoverClassName(index)"
            class="content-item"
            v-for="(item, index) in dataList"
            :key="index"
            :class="isActiveState == index ? 'active' : ''"
          >
            <view style="z-index:99">
              <view class="top_active">{{ item.active }}</view>
              <view class="giveMonth">{{ item.month }}</view>
              <view class="money">
                <text>{{ item.money }}</text>
                {{ item && item.num ? item.num : "元" }}
              </view>
              <view class="originalCost">
                <del>{{ item.original }}元</del>
              </view>
              <view class="banner">{{ item.activity }}</view>
            </view>
            <!-- <view v-show="item.name === '003'" class="shake-slow">中秋送礼</view> -->
          </view>
        </scroll-view>
        <view class="btn" @click="immediatelyPay">立即开通</view>
      </view>
    </view>
    <view class="vip_table_main">
      <view class="table_main_top">权益详情</view>
      <view class="table_main_body">
        <view class="item">
          <view class="body_title">政府黄页</view>
          <view class="body_option">√</view>
        </view>
        <view class="item">
          <view class="body_title">政策查询</view>
          <view class="body_option">√</view>
        </view>
        <view class="item">
          <view class="body_title">政策匹配</view>
          <view class="body_option">√</view>
        </view>
        <view class="item">
          <view class="body_title">企业评分</view>
          <view class="body_option">√</view>
        </view>
        <view class="item">
          <view class="body_title">文章分享精准获客</view>
          <view class="body_option">√</view>
        </view>
        <view class="item">
          <view class="body_title">项目查询</view>
          <view class="body_option">√</view>
        </view>
        <view class="item">
          <view class="body_title">项目地图</view>
          <view class="body_option">√</view>
        </view>
        <view class="item">
          <view class="body_title">可关注部门</view>
          <view class="body_option">不限</view>
        </view>
        <view class="item">
          <view class="body_title">可关注企业</view>
          <view class="body_option">不限</view>
        </view>
        <view class="item">
          <view class="body_title">企业项目信息查询</view>
          <view class="body_option">不限</view>
        </view>
        <view class="item">
          <view class="body_title">企业对比</view>
          <view class="body_option">不限</view>
        </view>
        <view class="item">
          <view class="body_title">数据导出</view>
          <view class="body_option">不限</view>
        </view>
        <view class="item">
          <view class="body_title">VIP会员专属标识</view>
          <view class="body_option">√</view>
        </view>
        <view class="item">
          <view class="body_title">新功能优先体验</view>
          <view class="body_option">√</view>
        </view>
        <view class="item">
          <view class="body_title">尊享客服</view>
          <view class="body_option">√</view>
        </view>
        <view class="item">
          <view class="body_title">服务商品牌推广</view>
          <view class="body_option" style="color: #545454">-</view>
        </view>
      </view>
    </view>
    <!-- vip会员8大升级权益 -->
    <view class="upgradeEquity">
      <view class="upgradeEquity_title">vip会员8大升级权益</view>
      <view class="upgradeEquity_body">
        <view class="item">
          <image src="../../static/VIP/policyPush.png" mode />
          <text>政策推送</text>
        </view>
        <view class="item">
          <image src="../../static/VIP/enterpriseQuery.png" mode />
          <text>企业查询</text>
        </view>
        <view class="item">
          <image src="../../static/VIP/enterpriseComparison.png" mode />
          <text>企业对比</text>
        </view>

        <view class="item">
          <image src="../../static/VIP/dataDerive.png" mode />
          <text>数据导出</text>
        </view>
        <view class="item">
          <image src="../../static/VIP/honourable.png" mode />
          <text>尊贵标识</text>
        </view>
        <view class="item">
          <image src="../../static/VIP/customer.png" mode />
          <text>精准获客</text>
        </view>
        <view class="item">
          <image src="../../static/VIP/promotion.png" mode />
          <text>品牌推广</text>
        </view>
        <view class="item">
          <image src="../../static/VIP/service.png" mode />
          <text>专享客服</text>
        </view>
      </view>
    </view>
    <!-- 他们都在用 -->
    <view class="theyUser">
      <view class="theyUser_title">
        <view class="main_title">他们都在用</view>
        <view class="sub_title">一起成为高效的优秀商务团队</view>
      </view>
      <view class="theyUser_main">
        <view class="theyUse_item">
          <image src="../../static/VIP/parter-1.png" mode />
        </view>
        <view class="theyUse_item">
          <image src="../../static/VIP/parter-2.png" mode />
        </view>
        <view class="theyUse_item">
          <image src="../../static/VIP/parter-3.png" mode />
        </view>
        <view class="theyUse_item">
          <image src="../../static/VIP/parter-4.png" mode />
        </view>
      </view>
    </view>
    <!-- 活动细则 -->
    <view class="activeRule">
      <view class="activeRule_L">
        <view class="Rule_title">【活动细则】</view>
        <p>一、活动时间：2022年8月01日-12月31日</p>
        <p>二、活动对象：平台新老会员</p>
        <p>三、活动内容：活动期间，凡订购VIP特权者，均可享受活动页面的优惠价格，成功购买后添加小助手微信领取相应礼包，详情请咨询小助手。</p>
        <p>四、比目镜平台享有本次活动最终解释权</p>

        <!-- <view class="Rule_title">【活动细则】</view>
        <p>一、活动时间：2022年7月20日-7月31日</p>
        <p>二、活动对象：平台新老会员</p>
        <p>三、活动内容：活动期间，凡订购688以上的VIP特权者，不仅可享受活动页面的优惠价格，而且还有话费赠送活动（话费充值手机号码仅限于购买会员的号码），成功购买后添加小助手微信领取相应礼包，详情请咨询小助手。</p>
        <p>四、比目镜平台享有本次活动最终解释权</p>-->
      </view>
      <view class="activeRule_R">
        <image src="../../static/VIP/vipservice.png" mode />
      </view>
    </view>
    <!-- 常见问题解答 -->
    <view class="commonIsSure">
      <view class="commonIsSure_title">常见问题解答</view>
      <view class="commonIsSure_content">
        <view class="commonIsSure_item">
          <view class="commonIsSure_top_title">1、可以开具发票吗？</view>
          <view class="commonIsSure_bottom_content">支付金额满500以上，可以免费开具增值税普通发票，500以下收取10%的手续费。</view>
        </view>
        <view class="commonIsSure_item">
          <view class="commonIsSure_top_title">2、VIP会员到期后，会有什么变化？</view>
          <view
            class="commonIsSure_bottom_content"
          >账号将恢复为普通会员，关注部门数量超出部分，系统会自动移除，用户可根据提示重新选择，提前续费则可继续保留，到期则无法继续使用高级功能。</view>
        </view>
        <view class="commonIsSure_item">
          <view class="commonIsSure_top_title">3、怎么支付，支付对公转账？</view>
          <view class="commonIsSure_bottom_content">目前仅支持微信，暂未开通对公转账功能，不便之处，敬请谅解。</view>
        </view>
        <view class="commonIsSure_item">
          <view class="commonIsSure_top_title">4、关于退款</view>
          <view class="commonIsSure_bottom_content">所有会员付费服务，开通后不支持退款。</view>
        </view>
      </view>
    </view>
    <Festival></Festival>
  </view>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { userInfo } from "../../util/api/user";
import { pageUrl, appId } from "@/util/api.js";
export default {
  //import引入的组件需要注入到对象中才能使用

  components: {},
  data() {
    //这里存放数据
    return {
      isActiveState: 2, // 是否活动状态
      dataList: [
        {
          active: "HOP",
          month: "查询劵",
          money: "8.8",
          num: "/ 10次",
          original: "30",
          activity: "紧急查询就用它",
          name: "014"
        },
        {
          active: "买1送1 · 送1个月",
          month: " 1 + 1个月",
          money: "138",
          original: "300",
          activity: "新人尝鲜体验",
          name: "001"
        },
        {
          active: "买1送1 · 送6个月",
          month: "6 + 6个月",
          money: "688",
          original: "1200",
          activity: "仅57元 / 月",
          name: "006"
        },
        {
          active: "买1送1 · 送12个月",
          month: " 12 + 12个月",
          money: "998",
          original: "1800",
          activity: "低至41元 / 月",
          name: "003"
        },
        {
          active: "买1送1 · 送24个月",
          month: " 24 + 24个月",
          money: "1688",
          original: "2800",
          activity: "只需1.17元 / 天",
          name: "010"
        }
      ],
      userId: ""
    };
  },
  //监听属性 类似于data概念
  computed: {},

  //方法集合
  methods: {
    // 切换类名样式
    switchoverClassName(index) {
      this.isActiveState = index;
    },
    // 点击立即开通
    immediatelyPay() {
      // 获取用户是否有登录状态
      let token = this.$getToken();
      if (!token) {
        uni.setStorageSync("pageUrl", window.location.href);
        uni.navigateTo({
          url: "/pages/login/index"
        });
        return;
      }

      uni.webView.getEnv(res => {
        if (res.miniprogram) {
          uni.webView.navigateTo({
            url:
              "/pages/pay/index?" +
              "payType=" +
              this.dataList[this.isActiveState].name +
              "&userId=" +
              this.userId +
              "&domain=" +
              encodeURI(window.location)
          });
        } else {
          window.location.href =
            `https://open.weixin.qq.com/connect/oauth2/authorize?appid=` +
            appId +
            `&redirect_uri=` +
            encodeURIComponent(
              pageUrl +
                `/app/payNew.html?payType=` +
                this.dataList[this.isActiveState].name +
                "&userId=" +
                this.userId +
                "&redirectUrl=" +
                (window.location.protocol + "//" + window.location.host) +
                "/pages/mime/center"
            ) +
            `&response_type=code&scope=snsapi_base`;
          // window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx0efacf82e40d21b5&redirect_uri=` +
          // 	encodeURIComponent(`http://web.51bmj.net/app/payNew.html?payType=` + this.dataList[this.isActiveState].name+"&userId="+this.userId+"&redirectUrl=/pages/mime/center") +
          // 	`&response_type=code&scope=snsapi_base`;
        }
      });
      //   uni.getProvider({service:"payment",success:(res)=>{
      //  alert(res.provider.length==0?"0":res.provider[0])
      //   }})

      //uni.webview
    },
    getParam(name) {
      let path = location.href;
      var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
      if (reg.test(path)) return unescape(RegExp.$2.replace(/\+/g, " "));
      return "";
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    userInfo().then(res => {
      // console.log();
      this.userId = res.result.id;
    });
  }
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.vip_page {
  overflow: hidden;
  background-color: #fff;
  width: 100%;
  .vip_top {
    width: 100%;
    .vip_top_bgimg {
      // position: relative;
      // font-size: 0;
      // width: 100vw;
      // height: 1334rpx;
      width: 100%;
      image {
        width: 100%;
        height: 100%;
      }
    }

    .vip_top_content {
      background-color: #fff;
      white-space: normal;
      white-space: nowrap;
      padding: 20rpx 0;
      .vip_main_content {
        background-color: #fff;
        white-space: nowrap;
        overflow-x: auto;
        height: 280rpx;

        .content-item {
          display: inline-block;
          position: relative;
          width: 240rpx;
          padding: 40rpx 10rpx 20rpx;
          text-align: center;
          background-color: #f5f5f5;
          margin: 0 20rpx;
          border-radius: 0 10rpx;

          &.active {
            background-color: #fff6ca;
            border: 1rpx solid #fff6ca;
          }

          &:last-child {
            margin-right: 0rpx;
          }

          .top_active {
            position: absolute;
            padding: 4rpx 14rpx;
            right: 0;
            top: 0;
            color: #fff;
            background-color: #d9b567;
            font-size: 22rpx;
            border-radius: 0 10rpx;
          }

          .giveMonth {
            line-height: 70rpx;
            color: #545454;
          }

          .money {
            font-size: 24rpx;
            line-height: 40rpx;

            text {
              font-size: 34rpx;
              color: #7f6326;
              font-weight: 700;
            }
          }

          .originalCost {
            line-height: 70rpx;
            color: #8e8e8e;
            font-size: 20rpx;
          }

          .banner {
            color: #8e8e8e;
          }
        }
      }

      .btn {
        color: #fff;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 30rpx 40rpx 0;
        background-color: #d9b567;
        font-size: 32rpx;
        height: 80rpx;
      }
    }
  }

  .vip_table_main {
    margin-top: 30rpx;
    padding: 0 30rpx;

    .table_main_top {
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      height: 70rpx;
      background-color: #f5f5f5;
      color: #d9b567;
    }

    .table_main_body {
      .item {
        height: 60rpx;
        line-height: 60rpx;
        display: flex;
        border: 1rpx solid #f5f5f5;
        border-top: none;

        .body_title {
          padding-left: 10px;
          flex: 1;
          color: #545454;
          border-right: 1rpx solid #f5f5f5;
        }

        .body_option {
          flex: 1;
          color: #dbb567;
          text-align: center;
        }
      }
    }
  }

  .upgradeEquity {
    padding: 0 30rpx;
    margin-top: 30rpx;

    .upgradeEquity_title {
      font-size: 50rpx;
      font-weight: 700;
      margin: 30rpx 0;
      text-align: center;
    }

    .upgradeEquity_body {
      display: flex;
      flex-wrap: wrap;

      .item {
        width: 20%;
        // height: 160rpx;
        display: flex;
        margin: 0 16rpx;
        margin-top: 40rpx;
        flex-direction: column;
        align-items: center;

        image {
          width: 136rpx;
          height: 136rpx;
        }

        text {
          margin-top: 20rpx;
          font-size: 20rpx;
        }
      }
    }
  }

  .theyUser {
    margin: 30rpx 0;

    .theyUser_title {
      height: 200rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .main_title {
        font-size: 50rpx;
        font-weight: 700;
      }

      .sub_title {
        margin-top: 10rpx;
        color: #ccc;
        font-size: 24rpx;
      }
    }

    .theyUser_main {
      display: flex;

      .theyUse_item {
        height: 166rpx;
        width: 25%;
        padding: 0 10rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .activeRule {
    padding: 50rpx 20rpx;
    display: flex;
    align-items: center;
    background-color: #2656f8;

    .activeRule_L {
      color: rgba(255, 255, 255, 0.8);
      flex: 1;
      font-size: 20rpx;
      margin-right: 20rpx;

      p {
        line-height: 44rpx;
      }
    }

    .activeRule_R {
      width: 200rpx;
      height: 200rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .commonIsSure {
    margin-top: 80rpx;
    padding-bottom: 200rpx;

    .commonIsSure_title {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .commonIsSure_content {
      .commonIsSure_item {
        font-size: 20rpx;
        padding: 0 30rpx;

        .commonIsSure_top_title {
          margin: 15rpx 0;
          font-weight: 600;
        }

        .commonIsSure_bottom_content {
        }
      }
    }
  }
}

/* 定义keyframe动画，命名为shake-slow */
@keyframes shake-slow {
  // 0%{opacity: 1;}
  // 100%{opacity: 0;}
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  50.01% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/* 添加兼容性前缀 */
@-webkit-keyframes shake-slow {
  // 0% { opacity: 1; }
  // 100% { opacity: 0; }
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  50.01% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes shake-slow {
  // 0% { opacity: 1; }
  // 100% { opacity: 0; }
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  50.01% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes shake-slow {
  // 0% {opacity: 1; }
  // 100% { opacity: 0;}
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  50.01% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shake-slow {
  // 0% { opacity: 1; }
  // 100% { opacity: 0; }
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  50.01% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/* 定义shake-slow类*/
.shake-slow {
  color: #dd4814;
  animation: shake-slow 1s linear infinite;
  /* 其它浏览器兼容性前缀 */
  -webkit-animation: shake-slow 1s linear infinite;
  -moz-animation: shake-slow 1s linear infinite;
  -ms-animation: shake-slow 1s linear infinite;
  -o-animation: shake-slow 1s linear infinite;
  position: absolute;
  top: 45%;
  left: 20%;
  z-index: 9;
  // color: red;
  font-weight: 600;
  font-size: 40rpx;
  opacity: 0.2;
}
</style>
